<template>
	<view class="container">
		<view class="news_hd">

			<scroll-view class="tab-h" scroll-x="true" scroll-with-animation="true" id="scroll-view"
				:scroll-left="scrollLeft">
				<view class="tab-item" :class="item.isSelected ? 'tab-bar-active':''" v-for="(item,index) in tab_bar"
					:key="index" :data-current="index" :data-id="item.id" :id="'item-'+item.id" @click="change_tab">
					{{item.tit}}
				</view>
			</scroll-view>
		</view>
		<view class="news_bd">
			<block v-for="(item,index) in news" :key="index">
				<navigator hover-class="none" :url="'/pages/newsdetail/newsdetail?id='+item.id">
					<view class="news_li">
						<view class="newsli_title">{{item.name}}</view>
						<view class="newsli_txt">{{item.desc}}</view>
						<view class="newsli_img">
							<image :src="item.image" mode="aspectFill"></image>
						</view>
						<view class="newsli_bot">
							<view class="newsli_lable">#{{item.cate.name}}</view>
							<view class="newsli_look"><text class="iconfont icon-chakan"></text>{{item.views}} 人阅读
							</view>
						</view>
					</view>
				</navigator>
			</block>

		</view>
	</view>
</template>

<script>
	import API from "@/common/api.js";
	export default {
		data() {
			return {
				scrollLeft: 0,
				news: [],
				screen_width: 0, // 屏幕宽度
				tab_bar: []
			}
		},
		onLoad() {
			// 首次获取屏幕宽度
			uni.getSystemInfo({
				success: (res) => {
					this.screen_width = res.screenWidth
				}
			});
			var $this = this
			API.post("common/newscate", {}).then((res) => {
				if (res.code == 1) {
					$this.tab_bar = res.data
				}
			})
			API.post("common/news", {
				cateid: 0
			}).then((res) => {
				if (res.code == 1) {
					$this.news = res.data
				}
			})
		},
		methods: {

			/**
			 * 动态改变scroll-left的值
			 * */
			_handleScroll(selectedId) {
				var _this = this;
				var query = uni.createSelectorQuery(); //创建节点查询器
				query.select('#item-' + selectedId).boundingClientRect(); //选择id='#item-' + selectedId的节点，获取节点位置信息的查询请求
				query.select('#scroll-view').boundingClientRect(); //获取滑块的位置信息
				//获取滚动位置
				query.select('#scroll-view').scrollOffset(); //获取页面滑动位置的查询请求
				query.exec(function(res) {
					_this.scrollLeft = res[2].scrollLeft + res[0].left + res[0].width / 2 - res[1].width / 2
				});
			},

			change_tab: function(e) {
				var id = e.target.dataset.id || e.currentTarget.dataset.id;
				var curIndex = 0;
				for (var i = 0; i < this.tab_bar.length; i++) {
					if (id == this.tab_bar[i].id) {
						this.tab_bar[i].isSelected = true;
						curIndex = i;
					} else {
						this.tab_bar[i].isSelected = false;
					}
				}
				this._handleScroll(id);
				var $this = this
				API.post("common/news", {
					cateid: id
				}).then((res) => {
					if (res.code == 1) {
						$this.news = res.data
					}
				})
			},


		}
	}
</script>

<style lang="scss">
	page {
		background: #f7f7f7;
	}

	.news_hd {
		background: #fff;
		position: fixed;
		top: var(--window-top);
		left: 0;
		right: 0;
		z-index: 2;
	}

	.news_hd ::-webkit-scrollbar {
		width: 0;
		height: 0;
		color: transparent;
	}

	.tab-h {
		width: 100%;
		white-space: nowrap;
	}

	.tab-item {
		margin: 26rpx 12rpx 26rpx;
		display: inline-block;
		border-radius: 50rpx;
		padding: 12rpx 36rpx;
		background: #f7f7f7;
		font-size: 32rpx;
		font-weight: bold;
	}

	.tab-item:first-child {
		margin-left: 20rpx;
	}

	.tab-item:last-child {
		margin-right: 20rpx;
	}

	.tab-bar-active {
		color: $color;
		background: #e3ebf7;
	}

	.news_bd {
		width: 100%;
		box-sizing: border-box;
		padding: 116rpx 30rpx 30rpx;
	}

	.news_li {
		background: #fff;
		border-radius: 20rpx;
		padding: 26rpx;
		margin-top: 24rpx;
	}

	.newsli_title {
		font-size: 32rpx;
		font-weight: bold;
		width: 100%;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.newsli_txt {
		color: #999;
		margin-top: 20rpx;
		font-size: 26rpx;
		width: 100%;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.newsli_img {
		width: 100%;
		height: 230rpx;
		border-radius: 20rpx;
		overflow: hidden;
		margin-top: 20rpx;
	}

	.newsli_img image {
		width: 100%;
		height: 100%;
	}

	.newsli_bot {
		width: 100%;
		overflow: hidden;
		margin-top: 20rpx;
	}

	.newsli_lable {
		font-size: 26rpx;
		float: left;
		color: $color;
	}

	.newsli_look {
		float: right;
		color: #9297aa;
	}

	.newsli_look text {
		margin-right: 10rpx;
		font-size: 36rpx;
		float: left;
	}

	/* #ifdef H5 */
	.news_hd {
		top: 0;
	}

	/* #endif */
</style>